<template>
  <div id="editor-main"
       style="width:100%;height:800px;">
    <le-editor v-model="data"
               :hljs-css="hljsCss"
               :image-uploader="imageUploader"
               @uploadImg="uploadImg"
               @save="save"></le-editor>
  </div>
</template>

<script>
import { uploadFileTo7n } from '@/api/fileupload'
export default {
  props: ['article', 'callback'],
  data() {
    return {
      data: this.article,
      value: '这里放markdown内容',
      hljsCss: 'agate',
      // 自定义
      imageUploader: {
        custom: true,
        fileType: 'file',
        fileNameType: '',
        imagePrefix: 'http://47.100.125.98', // 图片上传成功后，预览地址前缀
      },
    }
  },
  watch: {
    // 监听父组件传入的数据，更新到本地
    article(newVal, oldVal) {
      this.data = newVal
    }
  },
  methods: {
    // 自定义图片上传
    uploadImg: function ($vm, file, fileName) {
      uploadFileTo7n(file, (path) => {
        $vm.insertImg(path, fileName)
      })
      // 添加图片
      // 两个参数 第一个是图片访问路径 第二个是文件名

    },
    save(html) {
      this.callback({
        mkd: this.data,
        html: html
      })
    },
    changed() {
      let html = document.getElementsByClassName('markdown-body')
      this.callback({
        mkd: this.data,
        html: html[0].innerHTML
      })
    }
  }
}
</script>
